<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>事件修饰符</title>
    <script src="../js/vue.js"></script>
    <style>
        * {
            margin-top: 20px;
        }
        .demo {
            height: 50px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <!-- 
        Vue中的事件修饰符:
            1.prevent: 阻止默认事件（常用）;
            2.stop:阻止事件冒泡（常用）;
            3.once:事件只触发一次（常用);
            4.capture:使用事件的捕获模式;
            5.self:只有event.target是当前操作的元素是才触发事件;
            6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕: 
        注意：
            修饰符可以连续写以及组合使用
    -->

    <div id="app">
        <h1>欢迎来到{{name}}学习</h1>
        <!-- prevent: 阻止默认事件(常用); -->
        <a href="http://www.atguigu.com" @click.prevent="showInfo">点我显示信息(prevent: 阻止默认事件(常用))</a>

        <!-- stop:阻止事件冒泡(常用); -->
        <div class="demo" @click="showInfo">
            <button @click.stop="showInfo">点我显示信息(stop:阻止事件冒泡(常用))</button>
        </div>

        <!-- once:事件只触发一次(常用); -->
        <button @click.once="showInfo">点我显示信息(once:事件只触发一次(常用))</button>
    </div>
    <script>
    //配置好全局配置之后再创建Vue实例,关闭Vue的生产提示标识
     Vue.config.productionTip = false;
        var vm = new Vue({
           el:'#app',
           data:{
               name: '尚硅谷'
           },
           methods:{
                showInfo(event){
                    alert("同学你好");
                }
           }
        });
    </script>
</body>

</html>